<template>
  <div>
    <ElDescriptions :column="1" border>
      <ElDescriptionsItem label="类名" :min-width="80">
        <ClassEditor v-model="data.class" />
      </ElDescriptionsItem>
    </ElDescriptions>
    <CssEditor v-model="data.style" />
  </div>
</template>
<script setup lang="ts">
  import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
  import { ref, watch } from 'vue';
  import { CssEditor } from '@/views/components/CssEditor';
  import { ClassEditor } from '@/views/components/ClassEditor';

  const props = defineProps<{ modelValue?: Record<string, any>}>()  
  const emits = defineEmits(['update:modelValue'])

  const data = ref<Record<string, any>>(props.modelValue || {})

  watch(data, () => emits('update:modelValue', data.value), { deep: true })
  watch(() => props.modelValue, (val) => data.value = val, {deep: true})
</script>